<template>
<view class="page task">
    <!-- <view class="tabs">
        <view :class="['tab','fcenter',{'active': activetab===item.id}]" v-for="item in tabs" :key="item.id" @click="changeTab(item.id)">
            <text>{{item.name}}</text>
            <view class="line" v-if="activetab===item.id"></view>
        </view>
    </view> -->
    <nut-tabs v-model="activetab"  title-scroll title-gutter="5" :auto-height="true" @change="changeTab">
        <nut-tabpane :title="item.name" v-for="item in tabs" :key="item.id" :pane-key="item.id">
            <view v-if="activetab==item.id">
                <TaskCardStar v-for="item in list" :key="item.id" :item="item.activity" @click="goToSub('task/detail')"/>
                <slot></slot>
            </view>
        </nut-tabpane>
    </nut-tabs>
</view>
</template>

<script setup>
import TaskCardStar from "@/components/TaskCardStar";
import { ref } from 'vue'
import { navigateTo } from '@/router'
import "./index.scss";

const emit = defineEmits(['changeTab']);
const props = defineProps({
    list: {
        type: Array,
        default: [],
    },
})

const activetab = ref(0)
const tabs = [
    {id: 0, name: '等待中'},
    {id: 1, name: '进行中'},
    {id: 5, name: '审核中'},
    {id: 2, name: '已完成'},
    {id: 6, name: '已驳回'},
    {id: 3, name: '已失效'},
    {id: 4, name: '已取消'},
]

const goToSub = (url) => {
  navigateTo({ url: "/pagesub/"+url });
}

function changeTab(tab){
    const id = Number(tab.paneKey)
    emit('changeTab', id)
    // activetab.value = id
}
</script>